<template>
	<view>
		<view class="bg"></view>
		<view class="content">
			<view class="head">
				<view class="title">
					<!-- 万物汇联 -->
				</view>
				<view class="sub-title">
					<!-- 智能物联网支付管理平台 -->
				</view>
			</view>

			<!--			 营业统计开始-->
			<view class="revenue">
				<view>
					<text class="amount">{{daySuccessMoney > 0 ? daySuccessMoney : '0.00'}}</text>
					<text class="tips">今日营业额</text>
				</view>
				<view class="total">
					本月累计{{monthSuccessMoney > 0 ? monthSuccessMoney : '0.00'}}元
				</view>
				<image class="iot" :src="iotIcon" mode=""></image>
			</view>

			<view class="stats" :style="[{backgroundImage: backgroundImage}]">
        <view class="item" @click="toPage('/pages-other/coin/coin')">
          <view>合计投币{{consumeRecord.successCoin > 0 ? consumeRecord.successCoin : 0}}个</view>
          <view class="sub">
            <text>线下{{consumeRecord.successFactCoin > 0 ? consumeRecord.successFactCoin : 0}}个</text>
            <text>线上{{consumeRecord.successVirtualCoin > 0 ? consumeRecord.successVirtualCoin : 0}}个</text>
          </view>
        </view>
        <view class="item">
          <view>出礼比例{{ gift.percentage }}%</view>
          <view class="sub">
            <text>{{gift.tuiLiIncrementTotal}}个</text>
            <text>{{gift.totalRetailPrice}}元</text>
          </view>
        </view>
				<view class="device">
					<view>设备数量：{{totalDevice}}</view>
					<view class="u-m-l-20">在线：<text style="color: #40E801">{{onlineCount}}</text></view>
					<view class="u-m-l-20">离线：<text style="color: red;">{{offlineCount}}</text></view>
				</view>
			</view>
			<!-- 主要功能区开始 -->
			<view class="host" v-if="homeModuleList.length > 0">
				<u-grid :col="4" :border="false">
					<u-grid-item :customStyle="{padding:20+'rpx'}" v-for="(item, index) in homeModuleList" :key="index"
						@click="nav(item)">
						<u--image class="u-m-t-12" :showLoading="true" :src="baseStaticFileUrl+item.imgUrl"
							width="90rpx" height="auto" mode="widthFix" :showMenuByLongpress="false" />
						<view class="fun-name">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 主要功能区结束 -->

			<!-- 售货机功能区开始 -->
			<view class="top-box" v-if="salesModuleList.length > 0">
				<view class="top-title">
					<view class="top-title-left">
						<view class="vending-title">售货设备</view>
					</view>
					<view class="u-flex u-row-between">
						<view class="t-t-l-right" v-if="salesBoolean">（长按可拖动图标）</view>
						<view v-if="!salesBoolean" class="top-title-right-edit" @click="edit(2)">编辑</view>
						<view v-if="salesBoolean" class="top-title-right" @click="edit(2)">完成</view>
					</view>
				</view>
				<view v-if="salesBoolean">
					<drag-sort :cols="cols" :margin="2" v-model="salesModuleList" :square="cols > 1" :itemHeight="50"
						:showDelete="false" :disabled="!salesBoolean">
						<view class="sort-img-item" slot-scope="{ item }">
							<view class="drag-box" @click="nav(item)">
								<u--image class="u-m-t-12" :showLoading="true" :src="item.imgUrl" width="52rpx"
									height="52rpx" mode="widthFix" :showMenuByLongpress="false" />
								<text class="vending-name">{{item.name}}</text>
							</view>
						</view>
					</drag-sort>
				</view>
				<view class="vendingMachine" v-else>
					<view class="vending">
						<view class="vending-item" v-for="(item,index) in salesModuleList" :key="index"
							@click="nav(item)">
							<u--image class="u-m-t-12" :showLoading="true" :src="item.imgUrl" width="52rpx"
								height="auto" mode="widthFix" :showMenuByLongpress="false" />
							<view class="vending-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 售货机功能区结束 -->
			<!-- 其他开始 -->
			<view class="vendingMachine" v-if="otherModuleList.length > 0">
				<!-- <text class="vending-title">其他</text> -->
				<view class="vending">
					<view class="vending-item" v-for="(item,index) in otherModuleList" :key="index" @click="nav(item)">
						<u--image class="u-m-t-12" :showLoading="true" :src="baseStaticFileUrl+item.imgUrl"
							width="52rpx" height="auto" mode="widthFix" :showMenuByLongpress="false" />
						<view class="vending-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 其他结束 -->

			<!-- 新手帮助开始 -->
			<view class="item-title">新手帮助</view>
			<view class="help">

				<view class="help-item" style="margin-top: 0" v-for="(item,index) in courseVideoList" :key="index"
					@click="courseVideo(item.id)">
					<view>
						<view class="help-title">
							<text>{{item.title}}</text>
							<text class="sequence">{{item.id}}</text>
						</view>
						<view class="help-explain">{{item.explain}}</view>
					</view>
					<u--image :showLoading="true" :src="item.icon" width="202rpx" height="auto" mode="widthFix" />
				</view>

			</view>
			<!-- 新手帮助结束 -->
		</view>
		<u-overlay :show="overlayShow" @click="closeOverLay()" @touchmove.stop.prevent="moveHandle">
			<view class="shade-content">
				<view class="shade-title">请参考新手帮助教程完成基础设置</view>
				<u--image :showLoading="true" :src="shadeTipsBottomIcon" width="100rpx" height="auto" mode="widthFix" />
				<view class="shade-desc">
					<view class="close-btn">我知道了，关闭提示</view>
				</view>
			</view>
		</u-overlay>
		<u-modal @touchmove.stop.prevent="moveHandle" cancelText="稍后" @cancel="collectionModal=false"
			@confirm="merchantDetails" confirmText="认证" :showCancelButton="true" :show="collectionModal"
			title="微信/支付宝认证通知">
			<view class="collection-box">
				根据央行颁布的
				<text class="text-blue">《中国人民银行[2013] 第9号文》</text>和
				<text class="text-blue">《银发[2015]199号文》</text>
				之规定，银联、微信支付、支付宝等 支付机构
				<text class="text-blue">需商户提交身份证、银行卡等 相关资料</text>
				，否则无法使用扫码收款。
			</view>
		</u-modal>
		<ywkefu></ywkefu>
		<view @click="merchantDetails" v-if="collectionShow">
			<collection></collection>
		</view>
		<view @click="importCertification" v-if="importShow">
			<import-floating-window :allStatusEqualsFail="allStatusEqualsFail"></import-floating-window>
		</view>

		<u-popup :show="expireDeviceBoolean" mode="center" :round="20" :safeAreaInsetBottom="false">
			<view class="expireDeviceBox">
				<view style="padding: 30rpx 60rpx;">
					<view class="expireDeviceBoxTitle">
						设备流量卡过期提示
					</view>
					<view style="margin-top: 10rpx;">
						<view v-for="(item,index) in expireDeviceList" :key="index"
							style="margin-bottom: 20rpx;text-align: center;">
							<view v-if="item.expirationDay>0">
								设备 {{item.deviceNo}} 流量卡还有{{item.expirationDay}}天过期
							</view>
							<view v-else>
								设备 {{item.deviceNo}} 流量卡已过期
							</view>
						</view>
					</view>
					<view style="font-weight: 700;color: red;">请尽快续费，避免影响正常使用</view>

				</view>
				<view class="expireDeviceBoxBottomBox">
					<view @click="toDeviceRenew()" class="expireDeviceBoxButtomBox-2">
						续费
					</view>

					<view @click="expireDeviceClose()" class="expireDeviceBoxButtomBox">
						确定
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		eventBus
	} from '@/main.js'
	import DragSort from '@/components/gu-drag-sort/dragSort.vue'
	export default {
		components: {
			DragSort
		},
		data() {
			return {
				collectionShow: false,
				collectionModal: false,
				importShow: false,
				allStatusEqualsFail: false,
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				backgroundImage: 'url(' + this.$configPath.staticFileUrl + '/image/home/stats-bg.png)',
				iotIcon: this.$configPath.staticFileUrl + '/image/home/iot.png',

				totalIcon: this.$configPath.staticFileUrl + '/image/home/total.svg',

				shadeTipsBottomIcon: this.$configPath.staticFileUrl + '/image/home/shade-tips-bottom.png',

				douYinImage: this.$configPath.staticFileUrl + '/image/home/douyin.png',

				// 当前登录用户信息
				userInfo: {},
				// 展示菜单列表
				homeIconList: [],
				homeIconMap: [],
				homeModuleList: [],
				activityModuleList: [],
				//  售货机管理
				salesModuleList: [],
				otherModuleList: [],
				photographModuleList: [],
				// 当天营业额
				daySuccessMoney: '0.00',
				// 当月营业额
				monthSuccessMoney: '0.00',
				// 投币统计
				consumeRecord: {
					successCoin: 0,
					successFactCoin: 0,
					successVirtualCoin: 0,
				},
				// 出礼统计
				gift: {
					consumeCount: 0,
					tuiLiIncrementTotal: 0,
					totalRetailPrice: 0,
					percentage: 0,
				},
				headData: {
					totalAmount: 0,
					totalCount: 0,
					quantityOfCoinsSold: 0,
					commodityCount: 0,
					totalCostPrice: 0,
					totalProfit: 0,
					offlineCount: 0,
					onlineCount: 0,
					totalDevice: 0,
					lackTotalStockNumber: 0,
					yesterdayTotalOrderCount: 0,
					yesterdayTotalQuantityOfCoinsSold: 0,
					yesterdayTotalAmount: 0,
					yesterdayTotalCommodityCount: 0,
					yesterdayTotalCostPrice: 0,
					yesterdayTotalProfit: 0,
					orderTotalTurnover: 0,
				},
				// 在线数量
				onlineCount: 0,
				// 离线数量
				offlineCount: 0,
				// 设备总台数
				totalDevice: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
					merchantStoreId: '',
					networkIntensity: -1,
					deviceTypeId: '',
					deviceNo: ''
				},
				//插件属性
				cols: 4,
				overlayShow: false,
				playBoolean: false,
				salesBoolean: false,
				photographBoolean: false,

				courseVideoList: [{
						id: 1,
						title: '申请商户',
						explain: '教您如何申请微信支付宝收款商户',
						icon: this.$configPath.staticFileUrl + '/image/home/help-1.png',
					},
					{
						id: 2,
						title: '微信认证',
						explain: '微信商户需要认证后才能收款',
						icon: this.$configPath.staticFileUrl + '/image/home/help-2.png',
					},
					{
						id: 3,
						title: '支付宝认证',
						explain: '支付宝商户需要认证后才能收款',
						icon: this.$configPath.staticFileUrl + '/image/home/help-3.png',
					},
					{
						id: 4,
						title: '添加场地',
						explain: '教您如何添加场地，设置价格套餐',
						icon: this.$configPath.staticFileUrl + '/image/home/help-4.png',
					},
					{
						id: 5,
						title: '绑定设备',
						explain: '教您把设备绑定到场地，开启运营',
						icon: this.$configPath.staticFileUrl + '/image/home/help-5.png',
					},
					{
						id: 6,
						title: '套餐设置',
						explain: '教您如何设置场地套餐',
						icon: this.$configPath.staticFileUrl + '/image/home/help-6.png',
					},
					{
						id: 7,
						title: '设置子账号',
						explain: '教您如何设置子账号',
						icon: this.$configPath.staticFileUrl + '/image/home/help-7.png',
					},
					{
						id: 8,
						title: '更改银行卡',
						explain: '教您如何更改银行卡',
						icon: this.$configPath.staticFileUrl + '/image/home/help-8.png',
					},
				],
				storageKeyEnum: this.$storageKeyEnum,
				expireDeviceBoolean: false,
				expireDeviceList: [],
			}
		},
		// 展示可以分享到朋友圈
		onShareTimeline(res) {},

		onLoad(options) {
			//登录后进来
			if (options.theStatusOfTheInput) {
				this.findWhetherToImportBusinessByUserId();
			}
			this.findExpireDeviceListByUserId();
		},
		onShow() {
      this.initModule_v3();
			this.statisticsDayIncome();
			this.findThisMonthTurnover();
			this.wechatAlipayAuthenticationStatus();
			this.findStatistics();
			//统计今天和昨天的头部数据
			this.findHeadStatisticsData();
			this.$bluetooth.closeBluetoothAdapter();
		},
		// 下拉事件
		onPullDownRefresh() {
			this.statisticsDayIncome();
			this.findThisMonthTurnover();
      this.initModule_v3();
			this.findStatistics();
			//统计今天和昨天的头部数据
			this.findHeadStatisticsData();
		},
		methods: {
			findExpireDeviceListByUserId() {
				this.$api('deviceAnnualFee.findExpireListByUserId').then(res => {
					if (res.status == 0) {
						if (!this.$u.test.isEmpty(res.data)) {
							this.expireDeviceList = res.data;
							this.expireDeviceBoolean = true;
						}
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			expireDeviceClose() {
				this.expireDeviceBoolean = false;
			},
			toDeviceRenew() {
				this.expireDeviceClose()
				uni.navigateTo({
					url: "/pages-other/device-renew/device-renew",
				})
			},

			subtract(item) {
				// console.log("进入拉吗")
				if (!this.playBoolean) {
					return;
				}
			},
			merchantDetails() {
				this.collectionModal = false;
				uni.navigateTo({
					url: '/pages-my/name-authentication/name-authentication'
				})
			},
			importCertification() {
				this.navAddQualification();
			},
			//获取微信/支付宝是否认证
			wechatAlipayAuthenticationStatus() {
				this.$api('merchant.findWhetherToImportBusinessByUserId').then(res => {
					if (res.status == 0) {
						if (res.msg == "business") {
							this.allStatusEqualsFail = res.data;
							this.importShow = true;
						} else if (res.msg == "collection") {
							this.importShow = false;
							this.collectionShow = !res.data;
						}
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			//获取账户是否进件/认证微信/支付宝
			findWhetherToImportBusinessByUserId() {
				this.$api('merchant.findWhetherToImportBusinessByUserId').then(res => {
					if (res.status == 0) {
						if (res.msg == "business") {
							var that = this;
							this.importShow = true;
							this.allStatusEqualsFail = res.data;
							if (!res.data) {
								uni.showModal({
									title: '当前尚未注册收款商户，是否前往注册？',
									cancelText: '取消',
									confirmText: '前往',
									showCancel: true,
									success(res) {
										if (res.confirm) {
											that.navAddQualification();
										}
									}
								});
							}
						} else if (res.msg == "collection") {
							this.importShow = false;
							this.collectionShow = !res.data;
							this.collectionModal = !res.data;
						}
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			// 统计设备状态数量
			findStatistics() {
				this.$api('device.findStatisticsDevice', this.params)
					.then(res => {
						// console.log(res.data,"进入了吗")
						if (res.status == 0) {
							this.offlineCount = res.data.offlineCount;
							this.onlineCount = res.data.onlineCount;
							this.totalDevice = res.data.totalDevice;
						} else {
							getApp().err('请求数据不成功:' + res.msg);
						}
					})
			},
			findHeadStatisticsData() {
				this.$api('order.findHeadStatisticsData', this.params).then(res => {
					// console.log(res.data,"进入了吗")
					if (res.status == 0) {
						this.headData.totalAmount = res.data.totalAmount;
						this.headData.totalCount = res.data.totalCount;
						this.headData.quantityOfCoinsSold = res.data.quantityOfCoinsSold;
						this.headData.commodityCount = res.data.commodityCount;
						this.headData.totalCostPrice = res.data.totalCostPrice;
						this.headData.totalProfit = res.data.totalProfit;
						this.headData.offlineCount = res.data.offlineCount;
						this.headData.onlineCount = res.data.onlineCount;
						this.headData.totalDevice = res.data.totalDevice;
						this.headData.lackTotalStockNumber = res.data.lackTotalStockNumber;

						this.headData.yesterdayTotalAmount = res.data.yesterdayTotalAmount;
						this.headData.yesterdayTotalOrderCount = res.data.yesterdayTotalOrderCount;
						this.headData.yesterdayTotalQuantityOfCoinsSold = res.data
							.yesterdayTotalQuantityOfCoinsSold;
						this.headData.yesterdayTotalCommodityCount = res.data.yesterdayTotalCommodityCount;
						this.headData.yesterdayTotalCostPrice = res.data.yesterdayTotalCostPrice;
						this.headData.yesterdayTotalProfit = res.data.yesterdayTotalProfit;
						this.headData.orderTotalTurnover = res.data.orderTotalTurnover;
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			moveHandle() {},

			getUserNewInfo() {
				this.$api('user.getNewUserInfo').then(res => {
					if (res.status == 0) {
            this.userInfo = res.data
						if (res.data.temporaryRole) {
							uni.reLaunch({
								url: '/pages-vending-machine/bluetooth-replenishment/bluetooth-replenishment?isReturnAllowed=' +
									false
							})
						}
						const v = uni.getStorageSync(this.storageKeyEnum.close_ollie);
						if (res.data.loginCount <= 10 && this.$u.test.isEmpty(v)) {
							let _that = this;
							uni.pageScrollTo({
								selector: '.help',
								duration: 600,
								success() {
									_that.overlayShow = true;
								}
							});
						}
					}
				})
			},

			closeOverLay() {
				this.overlayShow = false;
				// 关闭新手教程
				uni.setStorageSync(this.storageKeyEnum.close_ollie, 1);
			},
			nav(data) {
				console.log("url:", data);
				uni.navigateTo({
					url: data.navUrl,
				})
			},
			//跳转页面
			toPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// 首页投币统计
			findTodayConsume() {
				this.$api('consumeRecord.findTodayConsume').then(res => {
					if (res.data != null) {
						this.consumeRecord = res.data;
					}
					uni.stopPullDownRefresh();
				})
			},

			navAddQualification() {
				if (this.allStatusEqualsFail) {
					uni.navigateTo({
						url: '/pages-merchant/list/list'
					})
				} else {
					uni.navigateTo({
						url: '/pages-qualification/add/settlement-type'
					})
				}
			},
			// 统计当天销售额
			statisticsDayIncome() {
				this.$api('order.statisticsDayIncome').then(res => {
					if (res.data != null) {
						this.daySuccessMoney = res.data;
					}
					uni.stopPullDownRefresh();
				})
			},

			// 统计当月销售额
			findThisMonthTurnover() {
				this.$api('statsUser.findThisMonthTurnover').then(res => {
					if (res.data != null) {
						this.monthSuccessMoney = res.data;
					}
					uni.stopPullDownRefresh();
				})
			},

			commonMenuItemFac(dataItem) {
				return {
					id: dataItem.id,
					name: dataItem.name,
					imgUrl: this.$configPath.staticFileUrl + dataItem.imgUrl,
					navUrl: dataItem.navUrl,
					iconColor: dataItem.iconColor,
					check: true,
					status: dataItem.status,
					userStatus: this.userInfo.roleId == 5 ? dataItem.userStatus : true,
					allocationType: dataItem.allocationType
				}
			},
      initModule_v3(){
        let data = {
          types: [16,17,18],
          queryBranch:1,
        }
        this.$api('permissionGroupItem.findByPermissionGroupIdList', data).then(res => {
          uni.hideLoading();
          if (res.status == 0) {
            this.salesModuleList = []
            let salesList = uni.getStorageSync(this.storageKeyEnum.sales_module_list + this.userInfo
                .id);
            if (this.$u.test.isEmpty(salesList) || res.data.salesModuleList.length != salesList
                .length) {
              res.data.salesModuleList.forEach(item2 => {
                let datum = this.commonMenuItemFac(item2)
                this.salesModuleList.push(datum);
              })
            } else {
              this.salesModuleList = salesList
            }

            this.homeIconList = []
            let playList = uni.getStorageSync(this.storageKeyEnum.home_icon_list + this.userInfo.id);
            //缓存没数据 或者 缓存数据量 和 数据库的数据量不一样 就从数据库拿数据
            if (this.$u.test.isEmpty(playList) || res.data.playModuleList.length != playList.length) {
              res.data.playModuleList.forEach(item2 => {
                let datum = this.commonMenuItemFac(item2)
                this.homeIconList.push(datum);
              })
            } else {
              this.homeIconList = playList
            }

            this.photographModuleList = []
            let photographList = uni.getStorageSync(this.storageKeyEnum.photograph_module_list + this.userInfo
                .id);
            if (this.$u.test.isEmpty(photographList) || res.data.photographModuleList.length != photographList
                .length) {
              res.data.photographModuleList.forEach(item2 => {
                let datum = this.commonMenuItemFac(item2)
                this.photographModuleList.push(datum);
              })
            } else {
              this.photographModuleList = photographList
            }

            this.homeModuleList = res.data.hostModuleList
            this.activityModuleList = res.data.activityModuleList
            this.otherModuleList = res.data.otherModuleList

            this.getUserNewInfo();
          } else {
            this.$helpers.toast('查询菜单不成功：' + res.msg);
          }
        }).catch(err => {
          uni.hideLoading();
        })
      },

			//点击编辑或完成
			edit(number) {
				if (number == 1) {
					this.playBoolean = !this.playBoolean;
					if (!this.playBoolean) {
						uni.setStorageSync(this.storageKeyEnum.home_icon_list + this.userInfo.id, this.homeIconList);
					}
				} else if (number == 2) {
					this.salesBoolean = !this.salesBoolean;
					if (!this.salesBoolean) {
						uni.setStorageSync(this.storageKeyEnum.sales_module_list + this.userInfo.id, this.salesModuleList);
					}
				}
				else if (number == 3) {
					this.photographBoolean = !this.photographBoolean;
					if (!this.photographBoolean) {
						uni.setStorageSync(this.storageKeyEnum.photograph_module_list + this.userInfo.id, this.photographModuleList);
					}
				}

			},
			courseVideo(index) {
				uni.navigateTo({
					url: '/pages-other/course_video/course_video?step=' + index
				})
			},

			startmessage() {
				console.log('startmessage--start')
			},
			completemessage() {
				console.log('completemessage--ok')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8F7;
	}

	.collection-box {
		font-size: 28rpx;
	}

	.text-blue {
		color: #6072FF;
	}

	.upper-right {
		position: absolute;
		top: 0rpx;
		right: 20rpx;
	}

	.top-box {
		background-color: #FFFFFF;
		padding: 20rpx 0rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	.top-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.top-title-right-edit {
		color: rgba(13, 13, 13, 0.4);
		font-size: 24rpx;
		padding-right: 25rpx;
	}

	.top-title-right {
		border: 1px solid rgb(96,114,255);
		border-radius: 240rpx;
		padding: 5rpx 40rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: rgb(96,114,255);
		margin-right: 25rpx;
	}

	.drag-box {
		position: relative;
		display: flex;
		flex-direction: column;
		padding-top: 40rpx;
		align-items: center;
	}

	.vending-name {
		font-size: $f-base;
		color: rgba(13, 13, 13, 0.9);
		margin-top: 12rpx;
	}

	.vending-title {
		font-size: 36rpx;
		font-weight: bold;
		color: rgb(34, 34, 34);
		margin-left: 30rpx;
	}

	.t-t-l-right {
		color: rgba(13, 13, 13, 0.4);
		font-size: 24rpx;
	}

	.bg {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 750rpx;
		height: 600rpx;
		//background: linear-gradient(180deg, #E5EFFF 0%, #E5EFFF 7%, rgba(229, 239, 255, 0.00) 100%, rgba(233, 241, 253, 0.00) 100%);
		background: linear-gradient(to bottom, rgb(229, 239, 255), rgba(233, 241, 253, 0));
		z-index: -99999;
	}

	.content {
		padding: 0rpx 24rpx;
		// 头部
		.head {
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #3d3d3d;
				height: 64rpx;
			}

			.sub-title {
				font-size: $f-base;
				color: rgba(13, 13, 13, 0.5);
				padding-top: 12rpx;
			}
		}

		// 收入明细
		.revenue {

			margin-top: 46rpx;
			padding-left: 56rpx;

			.amount {
				font-size: 48rpx;
				font-weight: bold;
				color: rgba(13, 13, 13, 0.9);
			}

			.tips {
				font-size: 20rpx;
				color: #DE7001;
				padding: 4rpx 20rpx;
				background-color: #FFE8DB;
				border-radius: 20rpx;
				margin-left: 12rpx;
			}

			.total {
				font-size: $f-base;
				color: rgba(13, 13, 13, 0.5);
				padding-top: 16rpx;
			}

			.iot {
				width: 209rpx;
				height: 343rpx;
				position: absolute;
				left: 446rpx;
				top: 64rpx;
			}
		}

		// 统计
		.stats {
			position: relative;
			width: 702rpx;
			height: 244rpx;
			border-radius: 20rpx 20rpx;
			// background-image: url("@/static/image/home/stats-bg.svg");
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: 56rpx;
			display: grid;
			grid-template-columns: 1fr 1fr;

			.item {
				font-size: $f-base;
				font-weight: bold;
				color: rgba(255, 255, 255, 0.9);
				padding: 40rpx 0 0 30rpx;

				.sub {
					font-size: $f-sm;
					color: rgba(255, 255, 255, 0.7);
					padding-top: 12rpx;
					font-weight: 400;

					text {
						margin-right: 18rpx;
					}
				}
			}

			.device {
				position: absolute;
				background: rgba(196, 196, 196, 0.25);
				box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.15);
				border-radius: 30rpx;
				color: rgb(255, 255, 255);
				font-size: 28rpx;
				letter-spacing: 0.26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: 37rpx;
				left: 30rpx;
				padding: 5rpx 25rpx;
			}

		}

		.advertising {
			margin-top: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.do-contact {
				position: absolute;
				top: 0rpx;
				opacity: 0;
				left: 0rpx;
				z-index: 100000;
			}

			/deep/.cell--light_without_border {
				width: 700rpx !important;
				height: 200rpx !important;
			}
		}

		.order-one {

			.order-money {
				font-size: 36rpx;
				color: rgba(255, 255, 255, 0.9);
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.order-one-warp {
				text-align: center;
				line-height: 46rpx;
				color: rgba(255, 255, 255, 0.9);
			}

			.size-24 {
				font-size: 24rpx;
			}

			.size-36 {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.states-warp {
			background: #6072FF;
			border-radius: 20rpx;
			padding: 40rpx;
		}

		.device-warp {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.device-content {
				text-align: center;

				.size-26 {
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.9);
				}

				.size-24 {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}
		}

		.host {
			padding: 20rpx 0;
			width: 100%rpx;
			border-radius: 20rpx;
			background: #ffffff;
			margin-top: 30rpx;

			.fun-item {
				padding: 20rpx;

			}

			.fun-name {
				font-size: $f-base;
				color: rgba(13, 13, 13, 0.9);
				margin-top: 12rpx;
			}
		}

		// 功能
		.fun {
			padding: 34rpx 0;
			width: 100%rpx;
			border-radius: 20rpx;
			background: #ffffff;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			text-align: center;
			margin-top: 20rpx;
			grid-gap: 30rpx 0;

			.fun-item {
				padding: 20rpx;

				.fun-name {
					font-size: $f-base;
					color: rgba(13, 13, 13, 0.9);
					margin-top: 12rpx;
				}
			}
		}

		.vendingMachine {
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.vending {
				padding: 20rpx 0;
				width: 100%rpx;
				border-radius: 20rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				text-align: center;
				grid-gap: 30rpx 0;

				.vending-item {
					padding: 20rpx;

					.drag-box {
						position: relative;
						display: flex;
						flex-direction: column;
						padding-top: 40rpx;
						align-items: center;
					}
				}
			}


		}

		// 标题
		.item-title {
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(13, 13, 13, 0.9);
			margin-top: 80rpx;
			margin-bottom: 40rpx;
		}

		.activ-item {
			background-color: #FFFFFF;
			border-radius: 25rpx;
			padding: 30rpx;
		}

		// 帮助
		.help {
			background: white;
			border-radius: 30rpx;
			padding: 40rpx 30rpx;

			.help-item {
				display: flex;
				color: #000000;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.help-title {
					font-size: 30rpx;
					display: flex;

					.sequence {
						width: 36rpx;
						height: $f-base;
						line-height: 28rpx;
						border-radius: 12rpx 16rpx 16rpx 0px;
						background-color: #FE404C;
						font-size: 14rpx;
						text-align: center;
						color: white;
						margin-left: 10rpx;
					}
				}



				.help-explain {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
				}
			}
		}
	}

	.shade-content {
		position: absolute;
		bottom: 20rpx;
		left: 24rpx;
		color: #fff;
		text-align: center;
		font-size: $f-lg;

		.shade-title {
			margin-bottom: 20rpx;
		}

		.shade-desc {
			width: 700rpx;
			height: 873rpx;
			margin-top: 10rpx;
			border: 1rpx dashed #fff;
			border-radius: 20rpx;
			font-size: $f-base;
			display: flex;
			align-items: center;
			justify-content: center;

			.close-btn {
				border: 1rpx dashed #fff;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
			}
		}
	}

	/deep/ .u-image {
		margin: 0 auto !important;
	}

	/deep/ .u-scroll-list {
		padding-bottom: 0 !important;
	}

	.expireDeviceBox {
		font-size: 28rpx;
		color: rgba(13, 13, 13, 0.9);
		background: linear-gradient(155deg, #afb9f9 0%, white 45%);
		border-radius: 40rpx;

		.expireDeviceBoxTitle {
			text-align: center;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			font-size: 34rpx;
			font-weight: 700;
		}

		.expireDeviceBoxBottomBox {
			display: flex;
			justify-content: space-between;
			font-size: $f-base;

			.expireDeviceBoxButtomBox-2 {
				text-align: center;
				padding: 10rpx 0 40rpx 0;
				flex: 1;
				color: $u-primary;
			}

			.expireDeviceBoxButtomBox {
				text-align: center;
				padding: 10rpx 0 40rpx 0;
				flex: 1;
			}
		}
	}
</style>
